<template>
  <div class="bangdan">
    <span>
      <router-link to="/moreplaylist">
        <img src="../assets/return.png" alt="" />
      </router-link>
    </span>
    <Poster :playlist="playList"></Poster>
    <SongList
      @play="$emit('play', $event)"
      :songs="showList"
      :showNum="showNumber"
    ></SongList>
  </div>
</template>

<script>
import SongList from "@/components/SongList.vue";
import Poster from "@/components/Poster.vue";

export default {
  data() {
    return {
      listID: 0,
      playList: null,
      showNumber: true,
      showList: [],
      showListBefore: [],
      limit: 20,
    };
  },
  props: ["listid"],
  created() {
    this.listID = this.$route.params.listid;

    this.$http
      .get("/playlist/detail", {
        params: {
          id: this.listID,
        },
      })
      .then((d) => {
          console.log(d);
        this.playList = d.data.playlist;
        this.showListBefore = d.data.playlist.tracks.map((dlist, index) => {
          let data = dlist;
          data.song = {
            artists: dlist.ar,
            privilege: {
              playMaxbr: d.data.privileges[index].playMaxbr,
            },
          };
          return data;
        });
        this.showList = this.showListBefore.slice(0, this.limit);

        let that = this;

        window.onscroll = function () {
          var scrollTop = document.documentElement.scrollTop;
          var windowHeight = document.documentElement.clientHeight;
          var scrollHeight = document.documentElement.scrollHeight;
          if (Math.ceil(scrollTop + windowHeight) >= scrollHeight) {
            let num = that.showList.length + that.limit;
            that.showList = that.showListBefore.slice(0, num);
          }
        };
      });
  },
  components: {
    SongList,
    Poster,
  },
};
</script>

<style lang="less" scoped>
.bangdan {
  span {
    position: fixed;
    top: 65px;
    left: 2px;
    z-index: 8;
  }
  padding-top: 15px;
}
</style>